<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dom事件的使用</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div>盒子1</div>
    输入框: <input>


    <script>
        // 点击盒子时盒子颜色变为红色且字变为我被点击了
        // css 中的- js 中改为 驼峰命名
        // 修改样式 先点 style，再点样式
        const div = document.querySelector('div');
        div.addEventListener('click', function () {
            console.log('我是click');
            //修改样式
            div.style.backgroundColor = 'red';
            //修改内容
            div.innerHTML = '我被点击了';
        })
        //鼠标移入时盒子颜色变为蓝色,移出时盒子变为紫色
        div.addEventListener('mouseenter', function () {
            div.innerHTML = '鼠标移入';
            div.style.backgroundColor = 'blue';

        })
        div.addEventListener('mouseleave', function () {
            div.innerHTML = '鼠标移除';
            div.style.backgroundColor = 'purple';

        })

        //输入框


        const inp = document.querySelector('input');
        inp.addEventListener('focus', function () {
            console.log('获取焦点');

        })
        inp.addEventListener('blur', function () {
            console.log('失去焦点');
            // 需求 1：失去焦点之后，如果输入框没有内容，加上红色边框
            if (inp.value === '') {
                inp.style.border = '5px solid red';
            }

        })
        inp.addEventListener('keydown', function () {
            console.log('键盘按下');

        })
        inp.addEventListener('keyup', function (e) {
            console.log('键盘抬起');
            // 需求 2：按了回车之后，获取用户输入的内容，弹框提示
            if (e.keyCode === 13) {//e.keyCode获取键盘的键值
                alert(inp.value);//获取用户输入的内容
            }

        })
        inp.addEventListener('input', function () {
            console.log('表单值改变', inp.value);
            // 需求3:用户输入内容的时候,判断输入的内容是否是邮箱,是输入框变红,不是变绿

            // 定义一个正则表达式，用于验证电子邮件格式
            const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;

            // 检查输入值是否符合电子邮件格式
            if (emailRegex.test(inp.value)) {
                // 如果符合，则将输入框的为橙色
                inp.style.backgroundColor = 'orange';
            } else {
                // 如果不符合，则将输入框的边框设置为绿色
                inp.style.backgroundColor = 'green';
            }
        })
    </script>
</body>

</html>